<template>
	<div>
		<div v-if="mode === 'DESIGN'">
			<el-date-picker disabled :placeholder="placeholder"></el-date-picker>
		</div>

		<div v-else-if="mode === 'PC' && !readonly">
			<el-popover ref="popover" placement="bottom-start" :width="500" trigger="click">
				<template #reference>
					<el-input placeholder="请选择日期和时间" readonly :model-value="_value" />
				</template>

				<div class="tabs">
					<el-tabs v-model="activeName">
						<el-tab-pane :label="pcDayStr" name="day">
							<el-calendar v-model="day" />
						</el-tab-pane>
						<el-tab-pane :label="time" name="time">
							<el-radio-group v-model="time" class="ml-4">
								<el-radio label="上午" size="large">上午</el-radio>
								<el-radio label="下午" size="large">下午</el-radio>
							</el-radio-group>
						</el-tab-pane>
					</el-tabs>
				</div>
			</el-popover>
		</div>

		<div v-else-if="mode === 'MOBILE' && !readonly">
			<field
				readonly
				right-icon="arrow"
				clickable
				name="datetimePicker"
				:model-value="_value"
				:placeholder="placeholder"
				@click="showPicker = true"
			/>
			<van-popup v-model:show="showPicker" position="bottom">
				<picker-group :title="mValue" :tabs="['选择日期', '选择时间']" @confirm="onConfirm">
					<date-picker :formatter="formatter" v-model="m_day" />
					<picker
						:columns="[
							{ text: '上午', value: '上午' },
							{ text: '下午', value: '下午' },
						]"
						v-model="m_time"
					/>
				</picker-group>
			</van-popup>
		</div>

		<div v-else>{{ _value }}</div>
	</div>
</template>

<script>
import { Field, Popup as VanPopup, DatePicker, Picker, PickerGroup } from 'vant';
import componentMinxins from '../../ComponentMinxins';

function getNowArray() {
	const d = new Date();
	return [d.getFullYear() + '', String(d.getMonth() + 1).padStart(2, '0') + '', String(d.getDate()).padStart(2, '0') + ''];
}

export default {
	mixins: [componentMinxins],
	name: 'AskForLeave',
	components: { Field, VanPopup, DatePicker, Picker, PickerGroup },
	props: {
		modelValue: {
			default: null,
		},
		placeholder: {
			type: String,
			default: '请选择日期时间',
		},
	},
	computed: {
		mValue() {
			const [y, m, d] = this.m_day;
			const [t] = this.m_time;
			return `${y}年${m}月${d}日 ${t}`;
		},
		pcDayStr() {
			const d = this.day;
			return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
		},
		pcValue() {
			return `${this.pcDayStr} ${this.time}`;
		},
	},
	created() {
		const v = this._value;
		if (!v) return;
		const res = /(\d+)年(\d+)月(\d+)日/.exec(v);
		if (res) {
			this.day = new Date(parseInt(res[1]), parseInt(res[2]) - 1, parseInt(res[3]));
			this.m_day = [res[1], res[2], res[3]];
		}
		this.time = v.split(' ')[1];
		this.m_time = [v.split(' ')[1]];
	},
	data() {
		return {
			showPicker: false,
			activeName: 'day',
			day: new Date(),
			time: '上午',
			m_day: getNowArray(),
			m_time: ['上午'],
		};
	},
	methods: {
		onConfirm() {
			this._value = this.mValue;
			this.showPicker = false;
		},
		formatter(type, option) {
			switch (type) {
				case 'year':
					option.text += ' 年';
					break;
				case 'month':
					option.text += ' 月';
					break;
				case 'day':
					option.text += ' 日';
					break;
			}
			return option;
		},
	},
	watch: {
		pcValue(v) {
			this._value = v;
		},
	},
};
</script>

<style scoped></style>
